<script setup lang="ts">

import type { DocsList } from '../../typings'
import {useRouter} from 'vue-router'
 const router = useRouter()
const { list } = defineProps<{
    list: DocsList,

}>()

const goToSpDetail = ()=>{

   localStorage.currentCollection = JSON.stringify(list)
    router.push({
        name:"productdetails",
        params:{
            id:list.tradeItemId
        }
    })
}
</script>

<template>
    <div class="search-commodity flex flex-col mt-2 text-black" @click="goToSpDetail">

        <img class=" w-44  h-56"  v-lazy="list.img" :src="list.img" alt="">
        <div class="totle-item flex flex-col px-2">

            <div class="sp-title">
              {{ list.title }}
            </div>

            <div class="sp-botton w-full flex justify-between">
                <span>
                    ￥{{ list.price }}
                </span>
                <span>
                    {{ list.cfav }}
                    <i><van-icon name="star-o" /></i>
                </span>
            </div>

        </div>

    </div>
</template>


<style lang="scss" scoped>
.search-commodity {
     background-color: #fff;
     border: 1px solid #ccc;
    .totle-item {
        .sp-title {
            text-align: left;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }

}
</style>